<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-11-22 16:45:51
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:37:08
-->
<template>
  <div class="app-container">
    <el-button
      type="primary"
      size="default"
      @click="addIncrement"
      style="margin-top: 10px"
    >
      添加增票资质
    </el-button>
    <el-table :data="incrementData">
      <el-table-column label="发票抬头" prop="title"> </el-table-column>
      <el-table-column label="纳税人识别号" prop="identifier">
      </el-table-column>
      <el-table-column label="注册地址" prop="address"> </el-table-column>
      <el-table-column label="注册电话" prop="phone"> </el-table-column>
      <el-table-column label="开户行名称" prop="bank"> </el-table-column>
      <el-table-column label="开户行帐号" prop="bankAccount"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <span @click="edit(scope.row)">编辑</span>
          <span @click="del(scope.row)">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      prev-text="上一页"
      next-text="下一页"
      background
      :page-size="pageSize"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      layout=" ->,total,sizes, prev, pager, next, jumper "
      :total="total"
    >
    </el-pagination>
    <el-dialog
      title="添加增票资质"
      :visible.sync="incrementShow"
      width="50%"
      @close="incrementClose"
    >
      <el-form
        :model="incrementForm"
        ref="incrementForm"
        :rules="incrementRules"
        label-position="top"
      >
        <el-form-item label="发票抬头" prop="title">
          <el-input v-model="incrementForm.title"></el-input>
        </el-form-item>
        <el-form-item label="纳税人识别号" prop="identifier">
          <el-input v-model="incrementForm.identifier"></el-input>
        </el-form-item>
        <el-form-item label="注册地址" prop="address">
          <el-input v-model="incrementForm.address"></el-input>
        </el-form-item>
        <el-form-item label="注册电话" prop="phone">
          <el-input v-model="incrementForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="开户行名称" prop="bank">
          <el-input v-model="incrementForm.bank"></el-input>
        </el-form-item>
        <el-form-item label="开户行帐号" prop="bankAccount">
          <el-input v-model="incrementForm.bankAccount"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="incrementShow = false">取消</el-button>
        <el-button type="primary" @click="onSubmit" v-if="!incrementForm.id"
          >保存</el-button
        >
        <el-button type="primary" @click="editSubmit" v-else>保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  vatInvoiceList,
  insertVatInvoice,
  updateVatInvoice,
  deleteVatInvoice,
} from "@/api/invoiceAst.js";
export default {
  data() {
    return {
      incrementShow: false,
      incrementRules: {
        title: [
          {
            required: true,
            message: "请填写发票内容",
            trigger: "blur",
          },
        ],
        identifier: [
          {
            required: true,
            message: "请填写纳税人识别号",
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: "请填写注册地址",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请填写注册电话",
            trigger: "blur",
          },
        ],
        bank: [
          {
            required: true,
            message: "请填写开户行名称",
            trigger: "blur",
          },
        ],
        bankAccount: [
          {
            required: true,
            message: "请填写开户行帐号",
            trigger: "blur",
          },
        ],
      },
      incrementData: [],
      incrementForm: {
        title: "",
        identifier: "",
        address: "",
        phone: "",
        bank: "",
        bank: "",
      },
      pageSize: 10,
      pageNum: 1,
      total: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 修改
    editSubmit() {
      updateVatInvoice(this.incrementForm).then((res) => {
        this.$message.success(res.msg);
        this.incrementShow = false;
        this.getList();
      });
    },
    // 提交
    onSubmit() {
      insertVatInvoice(this.incrementForm).then((res) => {
        this.$message.success(res.msg);
        this.incrementShow = false;
        this.getList();
      });
    },
    // 关闭新增增值
    incrementClose() {
      this.incrementForm = {
        title: "",
        identifier: "",
        address: "",
        phone: "",
        bank: "",
        bankAccount: "",
      };
    },
    //   添加增票资质
    addIncrement() {
      if (this.incrementData.length >= 1) {
        return this.$message.info("增值发票只允许添加一条");
      } else {
        this.incrementShow = true;
      }
    },
    //   编辑
    edit(row) {
      this.incrementForm = row;
      this.incrementShow = true;
    },
    // 删除
    async del(row) {
      let ids = [];
      ids.push(row.id);
      const confirmResult = await this.$confirm(
        "该操作将删除该地址，你确认删除吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      /*如果用户确认打印confirm,如果用户取消显示cancel*/
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除!");
      } else {
        deleteVatInvoice(ids).then((res) => {
          this.$message.success(res.msg);
          this.getList();
        });
      }
    },
    // 查询列表
    getList() {
      vatInvoiceList({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      }).then((res) => {
        this.incrementData = res.rows;
        this.total = res.total;
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },
  },
};
</script>

<style lang="less" scoped>
.el-form {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    width: 50%;
    /deep/ .el-input__inner {
      width: 330px;
    }
  }
}
.el-pagination {
  margin-top: 24px;
  /deep/ .el-pagination__total {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 25px;
  }
  /deep/ .btn-prev {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-input__inner {
    // width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .more {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-pagination__jump {
    .el-input__inner {
      width: 40px;
      height: 40px;
    }
  }
}
.cell {
  span {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1259fa;
    margin-right: 10px;
    cursor: pointer;
  }
}
</style>